<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>菜单管理页面</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">权限管理</a>
                <a><cite>菜单管理</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <button class="layui-btn" onclick="addparent()" ><i class="layui-icon layui-icon-add-circle-fine"></i>新增跟目录</button>
                            <table class="layui-table layui-form" id="tree-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script>
        layui.extend({ treeTable: '/js/treeTable'}).use(['treeTable','layer','code','form'],function(){
            var o = layui.$, form = layui.form, layer = layui.layer, treeTable = layui.treeTable;
            // 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组
            var	re = treeTable.render({
                elem: '#tree-table',
                url: '/menu/list',// （url和data参数必须设置一个）
                icon_key: 'title',
                hide_class: 'layui-hide',
                primary_key: 'menuid',
                parent_key: 'parentid',
                cols: [{
                        key: 'menuid',
                        title: 'ID',
                        align: 'center'
                    },{
                        key: 'title',
                        title: '名称',
                        template: function(item){
                            if(item.level == 0){
                                return '<span style="color:red;">'+item.name+'</span>';
                            }else if(item.level == 1){
                                return '<span style="color:green;">'+item.name+'</span>';
                            }else if(item.level == 2){
                                return '<span style="color:#aaa;">'+item.name+'</span>';
                            }
                        }
                    },{
                        title: '图标',
                        align: 'center',
                        template: function(item){
                            return '<i class="layui-icon '+item.icon+'" style="font-size: 18px;"></i>';
                        }
                    },{
                        title: '地址',
                        align: 'center',
                        template: function(item){
                           return item.url==null ? '' :item.url;
                        }
                    },{
                        title: '类型',
                        align: 'center',
                        template: function(item){
                            if(item.type===0){
                                return '目录';
                            }else if(item.type===1){
                                return '菜单';
                            }
                        }
                    },{
                       title: '打开方式',
                       align: 'center',
                       template: function(item){
                          if(item.target===0){
                              return '本页面打开';
                          }else if(item.target===1){
                              return '在新窗口打开';
                          }else{
                              return '';
                          }
                       }
                    },{
                        title: '操作',
                        align: 'center',
                        template: function(item){
                            return '<a class="layui-btn" onclick="editMenu('+item.menuid+')"><i class="layui-icon layui-icon-edit"></i>编辑</a>' +
                                   '<a class="layui-btn" onclick="deleteMenu('+item.menuid+')"><i class="layui-icon layui-icon-delete"></i>删除</a>' +
                                   '<a class="layui-btn" onclick="addMenuchild('+item.menuid+')"><i class="layui-icon layui-icon-add-1"></i>添加下级</a>';
                        }
                    }
                ]
            });
        })

        /**
         * 编辑菜单
         */
        function editMenu(menuid){
            xadmin.open("编辑菜单","/menu/edit?menuid="+menuid);
        }

        /**
         * 新增跟目录
         */
        function addparent(){
            xadmin.open("新增根目录","/menu/addparent");
        }

        /**
         * 新增下级子菜单
         * @param parentId
         */
        function addMenuchild(parentId){
            xadmin.open("新增下级子菜单","/menu/addchild?parentid="+parentId);
        }

        /**
         * 删除菜单
         * @param menuid
         */
        function deleteMenu(menuid){
            layer.confirm('确定要删除选中的记录？',{
                btn: ['确定', '取消']
            }, function () {
                $.ajax({
                    url: "/menu/remove",
                    type: "post",
                    data: {'menuid':menuid},
                    dataType : "json",
                    success: function (data) {
                        if (data.success) {
                            layer.alert(data.msg, {
                                icon : 6
                            }, function() {
                                location.reload();
                            });
                        } else {
                            layer.alert(data.msg, {
                                icon : 2
                            });
                        }
                    },error: function (XmlHttpRequest, textStatus, errorThrown) {
                        layer.msg('error!', {icon: 2, time: 2000});
                    }
                });
            })
        }

    </script>
</html>
